<template>
  <div>
    <div v-if="this.$route.query.blogId!==undefined">
      <div id="comment-container" class="ui segment bottom attached">
      <!-- TODO:跳转到博客 -->
      <h2 class="ui center aligned header">{{blog.title}}</h2>
      <br>
      <el-divider>
        <div style="width: 150px;height: 50px;">
          <i class="el-icon-s-comment" style="font-size: 50px;"></i><span
          style="font-size: 25px;font-weight: 600;position: absolute;left: 40%;top: 28%;">{{blog.commentCount===null?'0':blog.commentCount}}&nbsp;条评论</span>
        </div>
      </el-divider>
      <div v-if="flag">
        <div class="ui segment">
          <div class="ui threaded comments" style="font-size: 16px;max-width: none">
            <div class="comment" v-for="(comment, i) in page.list">
              <a class="avatar" style="position: relative">
                <img v-if="comment.email==='2390651924@qq.com'" class="blogger"
                     src="https://chenyumengblog.oss-cn-hangzhou.aliyuncs.com/img/safety.png" alt="">
                <img :src="comment.avatar" style="width: 50px;height: 50px;border-radius: 50%;margin-left: -6px">
              </a>
              <div class="content">
                <a :href="comment.site" target="_blank" class="author">{{comment.nickname}}</a>
                <div class="metadata">
                  <span class="date">{{comment.createTime}}</span>
                </div>
                <div class="text">{{comment.content}}</div>
                <div class="actions">
                  <a class="reply" style="color: red" @click="deleteComment(i, comment)">删除</a>
                </div>
              </div>
              <div class="comments" v-if="comment.childCommentList!==null&&comment.childCommentList.length!==0">
                <div class="comment" v-for="(item) in comment.childCommentList">
                  <a class="avatar" style="position: relative">
                    <img v-if="item.email==='2390651924@qq.com'" class="blogger"
                         src="https://chenyumengblog.oss-cn-hangzhou.aliyuncs.com/img/safety.png" alt="">
                    <img :src="item.avatar" style="width: 50px;height: 50px;border-radius: 50%;margin-left: -6px">
                  </a>
                  <div class="content">
                    <a :href="item.site" target="_blank" class="author">{{item.nickname}}</a> 回复 <a class="author" target="_blank" :href="item.replyComment.site">{{item.replyComment.nickname}}</a>
                    <div class="metadata">
                      <span class="date">{{item.createTime}}</span>
                    </div>
                    <div class="text">{{item.content}}</div>
                    <div class="actions">
                      <a class="reply" style="color: red" @click="deleteComment(i, item)">删除</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="ui middle aligned two column grid">
            <div class="column">
              <a @click="previousPage" :class="previousPageClass + ' ui blue basic button'">上一页</a>
            </div>
            <div class="right aligned column">
              <a @click="nextPage" :class="nextPageClass + ' ui blue basic button'">下一页</a>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <h2 class="ui center aligned header">暂无评论</h2>
      </div>
    </div>
    </div>
    <div v-else>
      <div class="ui segment bottom attached">
        <h2 class="ui center aligned header" style="height: 500px;">请选择博客</h2>
      </div>
    </div>
  </div>

</template>

<script>
  import {deleteCommentByCommentId, getCommentListByBlogIdAndLimit} from "../../api/comment";
  import {queryBlogById} from "../../api/blog";

  export default {
    name: 'CommentList',
    data() {
      return {
        blog: {
          title: null
        },
        previousPageClass: "disabled",
        nextPageClass: "",
        page: {},
        // true：有评论 false：无评论
        flag: true,
      }
    },
    activated() {
      if (this.$route.query.blogId!==undefined) {
        this.getBlogCommentList(1)
        this.getBlogByBlogId()
      }
    },
    methods: {
      getBlogByBlogId() {
        queryBlogById(this.$route.query.blogId).then(res => {
          if (res.code === 200) {
            this.blog = res.data
          }
        })
      },
      getBlogCommentList(page) {
        let data = {
          page,
          size: 5,
          id: this.$route.query.blogId
        }
        if (this.$route.query.blogId !== undefined) {
          getCommentListByBlogIdAndLimit(data).then(res => {
            if (res.code === 200) {
              this.page = res.data
              this.page.list.forEach(value => {
                if (value.childCommentList !== null) {
                  value.childCommentList.forEach(value1 => {
                    if (value1.parentCommentId === value.id) {
                      value1.replyComment = {
                        avatar: value.avatar,
                        blog: value.blog,
                        content: value.content,
                        createTime: value.createTime,
                        email: value.email,
                        id: value.id,
                        nickname: value.nickname,
                        parentCommentId: value.parentCommentId,
                        site: value.site
                      }
                    } else {
                      value.childCommentList.forEach(value2 => {
                        if (value1.parentCommentId === value2.id) {
                          value1.replyComment = value2
                        }
                      })
                    }
                  })
                }
              })
              if (!this.page.list.length > 0) {
                this.flag = false
              } else {
                this.flag = true
              }
              if (!this.page.hasPreviousPage) {
                this.previousPageClass = 'disabled'
              } else {
                this.previousPageClass = ''
              }
              if (!this.page.hasNextPage) {
                this.nextPageClass = 'disabled'
              } else {
                this.nextPageClass = ''
              }
            }
          })
        }
      },
      // 上一页
      previousPage() {
        if (this.page.pageNum > 1) {
          this.getBlogCommentList(this.page.pageNum - 1)
          this.$scrollTo('#comment-container')
        }
      },
      // 下一页
      nextPage() {
        if (this.page.pageNum < this.page.pages) {
          this.getBlogCommentList(this.page.pageNum + 1)
          this.$scrollTo('#comment-container')
        }
      },
      deleteComment(i, item) {
        const h = this.$createElement;
        this.$msgbox({
          title: '消息',
          message: h('p', null, [
            h('span', null, '确认删除评论'),
            h('span', null, '吗 '),
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '执行中...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 300);
                deleteCommentByCommentId({id:item.id}).then(res => {
                  if (res.code === 200) {
                    this.$message({
                      message: "删除成功",
                      type: "success"
                    })
                    this.getBlogCommentList(1)
                    this.getBlogByBlogId()
                  } else {
                    this.$message({
                      message: "删除失败,系统出错",
                      type: "error"
                    })
                  }
                })
              }, 3000);
            } else {
              done();
            }
          }
        });
      }
    }
  }
</script>
<style>
  .blogger {
    width: 16px!important;
    height: 16px!important;
    position: absolute;
    top: 38px;
    left: 29px;
  }
</style>
